<template>
  <el-dialog
    title="邀请情况"
    :visible.sync="$attrs.visable"
    width="1000px"
    :before-close="handleClose"
    append-to-body
    class="dialog_nopadd"
  >
    <div class="flex diabody">
      <div class="r_left h_full">
        <el-form
          ref="queryParams"
          :model="queryParams"
          size="small"
          :inline="true"
          class="p-16 searchbox"
        >
          <el-form-item label="" prop="keyword" class="mb-0 mr-0">
            <el-input
              placeholder="搜群名称/群主/群管"
              v-model="queryParams.keyword"
              @keyup.enter.native="handleQuery"
              class="x-input-select"
              style="width: 100%"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="rowbox plr-16">
          <div
            v-for="(item, index) in optionsList"
            :key="index"
            class="r_item p-8 br_4 commhover flexbetween"
            :class="{ active: item.active }"
            @click="handleItem(item)"
          >
            <div class="imgbox flexcenter">
              <img
                src="https://wework.qpic.cn/wwpic3az/646139_qhEaA8U0R8ya8Uz_1702871041/0"
                class="avatar br_4 mr-10"
              />
            </div>
            <div class="rinfo textover">
              <div class="c_text">{{ item.title }}</div>
              <div class="f-12 c_text3">编号：1688855537489444</div>
            </div>
          </div>
        </div>
        <pagination
          class="pagination flexcenter"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          layout="prev,pager,next"
        />
      </div>
      <div class="r_content h_full">
        <el-form
          ref="queryParams"
          :model="queryParams"
          size="small"
          :inline="true"
          class="c_header p-16 flexbetween"
        >
          <div>
            <el-form-item label="" prop="keyword" class="mb-0">
              <el-input
                placeholder="搜群成员/编号"
                v-model="queryParams.keyword"
                @keyup.enter.native="handleQuery"
                class="x-input-select"
                style="width: 226px"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="status" class="mb-0">
              <el-select
                v-model="queryParams.status"
                clearable
                @change="handleQuery"
                placeholder="选择状态"
                style="width: 100px"
              >
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-button size="small" type="primary">刷新群成员信息</el-button>
            <el-button size="small">
              <svg-icon icon-class="i_chart" class-name="iconchart" />
              导出数据</el-button
            >
          </div>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableList"
          class="commtable w_full plr-16"
          max-height='520'
        >
          <el-table-column label="群成员" prop="userName" width="250px">
            <template slot-scope="scope">
              <div class="flex aligncenter kh_box">
                <img
                  src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                  alt=""
                  class="useravatar"
                />
                <div class="khnamebox pl-12">
                  <div class="title c_222333" style="line-height: normal">
                    {{ scope.row.title || "肖成红--" }}
                  </div>
                  <span class="c_f08b00 f-12" style="line-height: normal"
                    >@志新</span
                  >
                  <div class="f-12 c_text3" style="line-height: normal">
                    编号：1688855537489444
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="在群状态	"
            prop="userName"
            width="150px"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span style="color: green">仍在群</span>
              <span>{{ scope.row.groupusername || "--" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="进群时间"
            prop="email"
            width="150px"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.time || "2024-03-07 15:23" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="退群时间"
            prop="email"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.time || "2024-03-07 15:23" }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleClose"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 3,
      optionsList: [
        {
          id: 1,
          title: "肖洁",
          active: true,
        },
        {
          id: 2,
          title: "肖成红",
          active: false,
        },
        {
          id: 3,
          title: "黄佳",
          active: false,
        },
      ],
      statusList: [
        { label: "在群", value: 1 },
        { label: "不在群", value: 2 },
      ],
      rowItem: null,
      tableList: [{ name: "长丰" },{ name: "长丰" },{ name: "长丰" },{ name: "长丰" },{ name: "长丰" },{ name: "长丰" },{ name: "长丰" },{ name: "长丰" },],
    };
  },
  props: {
    type: {
      default: 1, // 1 转让群主  2 设置群管
    },
  },
  created() {
    // console.log("type:", this.type);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    getList() {},

    handleQuery() {},

    handleItem(item) {
      this.optionsList.forEach((item) => (item.active = false));
      item.active = true;
      this.rowItem = item;
    },

    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.diabody {
  height: 600px;
}
.r_left {
  width: 260px;
  border-right: 1px solid #e9e9e9;
}
.rowbox {
  width: 100%;
  height: calc(100% - 110px);
  overflow: hidden;
  overflow-y: auto;
}
.r_item {
  &.active {
    background: #ebf2ff;
  }
  .imgbox {
    width: 40px;
    height: 40px;
  }
  .avatar {
    width: 30px;
    height: 30px;
  }
  .rinfo {
    flex: 1 1;
  }
}
.r_content {
  // flex: 1 0;
  width: calc(100% - 260px);
}
.pagination {
  ::v-deep .el-pagination {
    position: inherit;
  }
}
</style>